/**
 * 参考博客
 * https://www.cnblogs.com/luorende/p/9052419.html
 * 
 * 方法一：动态计算，slider上增加背景图，根据滑动的进度动态计算背景图的大小；
 * 方法二：slider+progress，根据slider滑动的进度，动态改变progress的显示进度；
 * 方法三：slider+mask，根据slider的滑动进度，动态该表mask显示区域大小；
 * 如果滑动条显示用的是九宫格，推荐方法一和二
 * 如果滑动条显示是一张图，推荐方法三
 */
cc.Class({
    extends: cc.Component,

    properties: {
        progress: {
            default: null,
            type: cc.Sprite
        },

        _width: 0,
    },


    onLoad() {
        let self = this;
        let slider = self.getComponent(cc.Slider);
        if (slider == null || self.progress == null) {
            return;
        }

        self._width = self.progress.node.width;
        self.progress.node.width = self._width * slider.progress;

        // slider.node.on('slide', function (event) {
        //     self.progress.node.width = slider.progress * self._width;
        // }, self);
    },

    callback: function (slider, customEventData) {
        this.progress.node.width = slider.progress * this._width;
    },

    toHome: function (event, data) {
        cc.director.loadScene("welcome");
    }

    // start () {},

    // update (dt) {},
});
